<!-- 每日体检问题页 -->
<template>
	<view class="activeLise">
		<view class="active" v-if="list.length>0">
			<!-- <scroll-view :scroll-top="scrollTop" show-scrollbar="false" scroll-y="true" class="scroll-Y" :style="{width:widths,height:heights}"> -->
				<block v-for="(item,index) in list" :key="index">
					<view class="body" v-show="index==indexTo" >
						<view class="top dis dis7 dis2">
							<view class="topText contenr">
								<text class="num1">{{index+1}}</text>
								<text class="num2">/{{list.length}}</text>
							</view>
						</view>
						<view class="topic">
							<text class="topic_text">Q{{item.title}}</text>
						</view>
						<block v-for="(i,index1) in item.optionInfoList" :key="index1">
							<view class="items dis dis5 dis1" :class="[item.ismult==0?(index1==item.num?'select':''):(i.selected?'selects':'')]"
							 @click="select(index,index1,i.selected,item.ismult,index1,item.questionid)">
								<view class=" itemTop dis dis3 dis2">
									<view class="itemLeft dis dis2">{{i.optionTitle}}</view>
									<!-- 单选 -->
									<view class="rigth contenr" v-if="item.ismult==0">
										<view class="yuan" v-show="index1 !=item.num"></view>
										<image src="../../../static/image/select.png" mode="aspectFit" class="yuan yuan_1" v-show="index1==item.num"></image>
									</view>
									<!-- 单选 -->
									<!-- 多选 -->
									<view class="rigth contenr" v-if="item.ismult==1">
										<image src="../../../static/image/duo.png" mode="aspectFit" class="yuans" v-show="!i.selected"></image>
										<image src="../../../static/image/duo2.png" mode="aspectFit" class="yuans" v-show="i.selected"></image>
									</view>
								</view>


							</view>
							<view class="kongs" v-if="index1==item.good.length-1"></view>
						</block>
						<view class="itemsImg dis dis1 dis2" v-if="item.pic">
							<image src="../../../static/img/chakai.png" mode="aspectFit" class="chaikai" @click="preview(item.pic)"></image>
						</view>
					</view>
				</block>
			<!-- </scroll-view> -->
				<view class="kongs">
					
				</view>
			<view class="bootm dis dis1 dis2">
				<block v-if="indexTo==0">
					<view class="xia contenr" @click="down">下一题</view>
				</block>
				<block v-if="indexTo>0 && indexTo<list.length-1">
					<view class="shang contenr" @click="goUp">上一题</view>
					<view class="xia contenr" @click="down">下一题</view>
				</block>
				<block v-if=" indexTo==list.length-1">
					<view class="shang contenr" @click="goUp">上一题</view>
					<view class="xia contenr" @click="submit">提交</view>
				</block>
			</view>
			<view class="bgCOnters dis dis2 dis5" v-show="isShow">
				<view class="vonte">
					<image :src="imageUrl" mode="aspectFit" class="imageUrl"></image>
				</view>
				<image src="../../../static/image/del_1.png" mode="aspectFit" class="dels" @click="del"></image>
			</view>
		</view>
		<!-- <view class="bgCOnters dis dis1 dis2 " v-if="isShow1">
			<view class="bodyItems">
				<view class="tops contenr">您上次的测评未完成，是否继续？</view>
				<view class="class1_1 dis ">
					<view class="btns1">
						<image src="../../../static/img/tubtn.png" mode="aspectFit" class="images"></image>
					</view>
					<view class="btns1">
						<image src="../../../static/img/jxbtn.png" mode="aspectFit" class="images" @click="getStorageData"></image>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	let app = getApp().globalData;
	import result from '../../../common/js/indexFx.js';
	export default {
		data() {
			return {
				list: [],
				indexTo: 0, //答题页面是否显示
				// numIndex: -1, //单选按钮是否显示
				imageUrl: '',
				isShow: false,
				isShow1: false,
				//后台数据交互
				answerInfo: {},
				id: '', //类型问题的ID
				openid: '', //后台返回的openID，
				userId: '', //后台返回的userId
				testPaperId: '', //后台返回的testPaperId
				// optionId: '', //单选选中的答案ID，
				optionIdList: [], //多选选中的答案ID，
				isCheckd: 0, //当前问题是单选还是多选
				answerLength: 0, //当前问题最多选择几个
				isSubnit: false, //是否将答案提交成功
				listInfo: [], //缓存中的数据


				//改版数据
				subjectid: null, //类型id
				goodList: [], //答案数组
				heights: '500px',
				widths: '100%'
			}
		},
		methods: {
			// 下一题
			down() {
				let index = this.indexTo;
				if (!this.setIs(index)) {
					this.$http.isMssage('当前题目必须选择一个选项');
					return;
				}

				this.indexTo = this.indexTo + 1;
			},
			setIs(index) {
				let list = this.list[index].optionInfoList;
				let is = false;
				let lst = this.list;
				if (lst[index].num > -1) {
					is = true;
				}
				for (let i = 0; i < list.length; i++) {
					if (list[i].selected) {
						is = true;
					}
				}

				return is;
			},
			// 上一题
			goUp() {
				this.indexTo = this.indexTo - 1
			},
			select(e, index, is, show, id, questionId) {
				/*
				e,数组第一层的下标，
				index,第二层数组的下标
				is,第二层数组是否选中,
				show:判断是单选还是多先,0单1多,
				id:第二层数组的下标
				questionId：题目id
				*/
				// console.log('数组第一层的下标e', e)
				// console.log('第二层数组的下标index', index)
				// console.log('第二层数组是否选中', is)
				// console.log('判断是单选还是多先show', show)
				// console.log('题目questionId', questionId)
				let that = this;
				let list = this.list;
				if (show == 0) {
					list[e].num = index;
					// list[e].optionInfoList[index].selected = !list[e].optionInfoList[index].selected;
					that.addList(questionId, index, show);
				} else if (show == 1) {
					list[e].optionInfoList[index].selected = !list[e].optionInfoList[index].selected;
					that.addList(questionId, index, show);
				} else {
					console.log('木有')
				}
				this.list = list;
			},
			addList(questionId, index, show) {
				// questionId题目id，
				// 选中的index，
				// 当前题目是单选还是多选
				let that = this;
				let goodList = this.goodList;
				if (goodList.length <= 0) {
					let good = [];
					good.push(index);
					goodList.push({
						good: good,
						questionId: questionId
					})
					that.goodList = goodList;
					return;
				}
				if (show == 0) {
					let goods = [];
					goods.push(index);
					let is = false;
					for (let i = 0; i < goodList.length; i++) {
						if (goodList[i].questionId == questionId) {
							goodList[i].good = goods;
							is = true;
						}
					}
					if (!is) {
						goodList.push({
							good: goods,
							questionId: questionId
						})
					}
				} else if (show == 1) {
					let goods1 = [];
					let isPush = true;
					let isSl = true;
					for (let y = 0; y < goodList.length; y++) {
						if (goodList[y].questionId == questionId) {
							for (let j = 0; j < goodList[y].good.length; j++) {
								if (goodList[y].good[j] == index) {
									goodList[y].good.splice(j, 1);
									isPush = false;
								}
							}
							if (isPush) {
								goodList[y].good.push(index)
							}
							isSl = false;
						}
					}
					if (isSl) {
						goods1.push(index);
						goodList.push({
							good: goods1,
							questionId: questionId
						})
					}
				}
				this.goodList = goodList;
			},
			// 查看图片
			preview(url) {
				this.imageUrl = url;
				this.isShow = true
				console.log('url', url)
			},
			// 关闭蒙层
			del() {
				this.isShow = false
			},
			// 获取数据
			getData(id) {
				let that = this;
				this.$http._post('test/getquestionlist.do', {
					id: id
				}).then(res => {
					console.log(res)
					if (res.data.issuccess == 0) {
						that.$http.isMssage(res.data.msg);
						return
					}
					let {
						data
					} = res.data;
					this.subjectid = data.subjectid;
					let questionlist = data.questionlist;
					for (let i = 0; i < questionlist.length; i++) {
						questionlist[i].num = -1;
						questionlist[i].answer = questionlist[i].answer.replace(/\n/g, '|');
						questionlist[i].answer = questionlist[i].answer.split('|');
						let optionInfoList = []
						for (let y = 0; y < questionlist[i].answer.length; y++) {
							optionInfoList.push({
								optionTitle: questionlist[i].answer[y],
								selected: false
							})
						}
						questionlist[i].optionInfoList = optionInfoList
					}
					console.log(questionlist)
					that.list = questionlist
				})
			},
			// 提交数据
			submit() {
				let index = this.list.length - 1
				if (!this.setIs(index)) {
					this.$http.isMssage('当前题目必须选择一个选项');
					return;
				}
				let that = this;
				let goodList = this.goodList;
				let subjectid = this.subjectid;
				let answerlist = '';
				let str = '';

				for (let i = 0; i < goodList.length; i++) {
					for (let j = 0; j < goodList[i].good.length; j++) {
						str = `${str}${goodList[i].good[j]}`;
					}
					answerlist = answerlist + `${str},`;
					str = '';
					// 
				}
				answerlist = (answerlist.substring(answerlist.length - 1) == ',') ? answerlist.substring(0, answerlist.length - 1) :
					answerlist;
				console.log(answerlist)
				this.$http._post('test/submittest.do', {
					subjectid: subjectid,
					answerlist: answerlist
				}).then(res => {
					if (res.data.issuccess == 1) {
						let {
							data
						} = res.data;
						that.getResult(data.id)
					}
					console.log(res)
				})

			},
			// 获取结果
			getResult(id) {
				let that = this;
				this.$http._post('test/getresult.do', {
					subjectid: id
				}).then(res => {
					if (res.data.issuccess == 1) {
						let {
							data
						} = res.data;
						app.resultData = data;
						let obj = result.splitting(data);
						app.listValue = obj.listValue;
						app.listName = obj.listName;
						console.log(obj)
						let daily = obj.daily;
						uni.reLaunch({
							url: `../result/result?daily=${daily}`
						})
					}
					console.log(res)
				})
			},
			showTouying(){
				// console.log('e',e)
			},
		},
		onLoad(e) {
			console.log(e)
			let isIPX = app.isIPX;
			if (isIPX) {
				this.heights = '650px';
			} else {
				this.heights = '500px';
			}
			uni.setNavigationBarTitle({
				title: app.title
			});
			let that = this;
			this.id = e.id;
			this.getData(e.id);
			// this.getResult()
		},


	}
</script>

<style lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	page {
		background-color: #fff;
		// height: 100%;
		width: 100%;
	}

	.activeLise {
		height: 100%;
		width: 100%;
	}

	.active {
		// position: relative;
		height: 100%;
		overflow: hidden;

		.body {
			// position: absolute;
			width: 686upx;
			// left: 32upx;
			min-height: 950upx;
			margin: auto;
			// z-index: 2;
			.top {
				width: 100%;
				height: 80upx;

				// border: 1px solid red;
				.topText {
					width: 100upx;
					height: 50upx;

					.num1 {
						font-size: 36upx;
						font-family: $typeface;
						font-weight: 500;
						color: #333333;
					}

					.num2 {
						font-size: 36upx;
						font-family: $typeface;
						font-weight: 500;
						color: #C1C1C1;
					}
				}
			}

			.topic {
				width: 100%;
				height: 120upx;

				// border: 1px solid red;
				.topic_text {
					font-size: 36upx;
					font-family: $typeface;
					font-weight: 500;
					color: #000000;
				}
			}

			.items {
				width: 686upx;
				min-height: 112upx;
				background: #F8F8F8;
				border-radius: 24upx;
				margin-bottom: 24upx;
				padding: 20upx 0;
				border: 2rpx solid #F8F8F8;

				.itemTop {
					width: 100%;
					height: 100%;

					.itemLeft {
						width: 538upx;
						height: 100%;
						font-size: 28upx;
						font-family: $typeface1;
						font-weight: 400;
						color: #333333;
						margin-left: 32upx;
					}

					.rigth {
						width: 80upx;
						height: 100%;

						position: relative;

						.yuan {
							position: absolute;
							width: 32upx;
							height: 32upx;
							border: 1px solid #C1C1C1;
							border-radius: 50%;
						}

						.yuan_1 {
							border: none;
						}

						.yuans {
							position: absolute;
							width: 32upx;
							height: 32upx;


						}
					}
				}


			}

			.select {
				background-color: #FFFCF3;
				border: 2upx solid #EAE2CB;
			}

			.selects {
				background-color: #FFFCF3;
				border: 2upx solid #EAE2CB;
			}

		}

		.itemsImg {
			width: 100%;
			height: 140upx;
			margin: 20upx 0;

			.chaikai {
				width: 251upx;
				height: 64upx;
			}
		}

		.kongs {
			height: 170upx;
			// border: 1px solid red;
		}

		.kongslisr {
			height: 200upx;
			border: 1px solid red;
		}
		.kongs{
			width: 750upx;
			height: 220upx;
		}

		.bootm {
			width: 750upx;
			height: 210upx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
			.xia {
				width: 446upx;
				height: 88upx;
				background: #FFD344;
				border-radius: 44upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;

			}

			.shang {
				width: 192upx;
				height: 88upx;
				background: #EDEDED;
				border-radius: 44upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin-left: 32upx;
				margin-right: 48upx;
			}

			.images {
				width: 686upx;
				height: 88upx;
			}

			.images1 {
				width: 192upx;
				height: 88upx;
			}

			.images2 {
				width: 446upx;
				height: 88upx;
				margin-left: 48upx;
			}
		}

		.bgCOnters {
			position: absolute;
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.7);
			// opacity: 0.6;
			z-index: 99;
			bottom: 0;

			.vonte {
				width: 666upx;
				height: 776upx;
				background: #fff;
				border-radius: 24upx;
				border: 1px solid #CFCFCF;
				z-index: 99;
				margin-top: 156upx;

				.imageUrl {
					width: 100%;
					height: 100%;
					// border-radius: 50%;
				}
			}

			.dels {
				width: 72upx;
				height: 72upx;
				margin-top: 92upx;
			}

		}
	}

	.bgCOnters {
		position: absolute;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		// opacity: 0.6;
		z-index: 99;
		bottom: 0;

		.bodyItems {
			width: 640upx;
			height: 368upx;
			background: #FFFFFF;
			border-radius: 24upx;

			.tops {
				width: 100%;
				height: 240upx;
				font-size: 36upx;
				font-family: $typeface;
				font-weight: 500;
				color: #000000;
				// margin-top: 100upx;
			}

			.class1_1 {
				// border: 1px solid red;
				height: 128upx;

				.btns1 {
					width: 264upx;
					height: 88upx;
					margin-left: 32upx;
					margin-right: 16upx;

					.images {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
